<template>
  <div class="article-popup" v-if="visible">
    <div class="article-popup-content" :style="popupStyle">
      <div class="popup-header">
        <h2 class="popup-title">{{ selectedItem.channel }} - 文章列表</h2>
        <button class="close-btn" @click="close">×</button>
      </div>
      <div class="popup-body">
        <div class="table-container">
          <el-table
            :data="detailData"
            style="width: 100%"
            class="detail-table"
            :height="900"
            v-loading="loading"
            empty-text="暂无数据"
          >
            <el-table-column
              prop="dataName"
              label="文章标题"
              min-width="200"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">
                <div class="title-cell" @click="openArticle(scope.row.dataUrl)">
                  {{ scope.row.dataName }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="source"
              label="来源"
              width="120"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="dataReleaseTime"
              label="发布时间"
              width="140"
              align="center"
            >
              <template slot-scope="scope">
                {{ formatDateTime(scope.row.dataReleaseTime) }}
              </template>
            </el-table-column>
            <el-table-column
              prop="dataReadCount"
              label="阅读量"
              width="80"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="dataLikeCount"
              label="点赞量"
              width="80"
              align="center"
            >
            </el-table-column>
          </el-table>
        </div>
        <div class="pagination-container" v-if="pagination.total > 0">
          <el-pagination
            small
            :current-page="pagination.currentPage"
            :page-size="pagination.size"
            :total="pagination.total"
            :page-sizes="[10, 20, 50, 100]"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { currentPOST } from "api/modules";

export default {
  name: "ArticleListPopup",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    selectedItem: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      popupSize: {
        width: "80%",
        height: "700px",
      },
      detailData: [],
      loading: false,
      pagination: {
        currentPage: 1,
        size: 20,
        total: 0,
      },
    };
  },
  computed: {
    popupStyle() {
      return {
        width: this.popupSize.width,
        height: this.popupSize.height,
        minHeight: "900px",
        maxWidth: "1400px",
        maxHeight: "900px",
      };
    },
  },
  watch: {
    visible(newVal) {
      if (newVal && this.selectedItem.channel) {
        this.getDetailList();
      }
    },
  },
  methods: {
    close() {
      this.$emit("close");
      this.resetData();
    },

    getDetailList() {
      this.loading = true;
      currentPOST("rightTopArticleHome", {
        lastDay: 100,
        pageSize: this.pagination.size,
        current: this.pagination.currentPage,
        channels: [this.selectedItem.channel],
      })
        .then((res) => {
          this.loading = false;
          if (res.code === 0) {
            this.detailData = res.data.data || [];
            this.pagination.total = res.data.total || 0;
            this.pagination.currentPage = res.data.currentPage || 1;
            this.pagination.size = res.data.size || 10;
          } else {
            this.$Message({
              text: res.msg,
              type: "warning",
            });
          }
        })
        .catch((error) => {
          this.loading = false;
          console.error("详细数据请求失败:", error);
        });
    },

    handleSizeChange(size) {
      this.pagination.size = size;
      this.pagination.currentPage = 1;
      this.getDetailList();
    },

    handleCurrentChange(currentPage) {
      this.pagination.currentPage = currentPage;
      this.getDetailList();
    },

    openArticle(url) {
      if (url) {
        window.open(url, "_blank");
      }
    },

    formatDateTime(dateTimeStr) {
      if (!dateTimeStr) return "";

      try {
        let dateStr = dateTimeStr;
        if (dateStr.includes("T")) {
          dateStr = dateStr.replace("T", " ").split(".")[0];
        }

        const date = new Date(dateStr);
        if (isNaN(date.getTime())) {
          return dateTimeStr;
        }

        const month = (date.getMonth() + 1).toString().padStart(2, "0");
        const day = date.getDate().toString().padStart(2, "0");
        const hours = date.getHours().toString().padStart(2, "0");
        const minutes = date.getMinutes().toString().padStart(2, "0");

        return `${month}-${day} ${hours}:${minutes}`;
      } catch (error) {
        return dateTimeStr;
      }
    },

    resetData() {
      this.detailData = [];
      this.pagination.currentPage = 1;
    },
  },
};
</script>

<style lang="scss" scoped>
.article-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;

  .article-popup-content {
    background: linear-gradient(135deg, #0c1b33 0%, #1a3a5f 100%);
    border: 1px solid #2d5278;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: rgba(5, 64, 128, 0.3);
    border-bottom: 1px solid #2d5278;

    .popup-title {
      color: #bae7ff;
      font-size: 16px;
      margin: 0;
      font-weight: bold;
    }

    .close-btn {
      background: rgba(255, 77, 79, 0.3);
      color: #ffa39e;
      border: 1px solid #ff4d4f;
      border-radius: 4px;
      width: 24px;
      height: 24px;
      cursor: pointer;
      font-size: 16px;
      display: flex;
      align-items: center;
      justify-content: center;

      &:hover {
        background: rgba(255, 77, 79, 0.5);
        color: #ffffff;
      }
    }
  }

  .popup-body {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .table-container {
    flex: 1;
    overflow: hidden;
  }

  .title-cell {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    cursor: pointer;
    color: #bae7ff;

    &:hover {
      color: #ffffff;
      text-decoration: underline;
    }
  }

  .pagination-container {
    margin-top: 15px;
    display: flex;
    justify-content: flex-end;
  }

  // 分页样式
  :deep(.el-pagination) {
    .btn-prev,
    .btn-next,
    .number {
      background: rgba(5, 64, 128, 0.5);
      color: #bae7ff;
      border: 1px solid #2d5278;

      &:hover {
        color: #ffffff;
        background: rgba(24, 144, 255, 0.3);
      }
    }

    .active {
      background: rgba(24, 144, 255, 0.5);
      color: #ffffff;
      border-color: #1890ff;
    }

    .el-pagination__total,
    .el-pagination__jump {
      color: #bae7ff;
    }

    .el-input__inner {
      background: rgba(5, 64, 128, 0.5);
      border: 1px solid #2d5278;
      color: #bae7ff;
    }
  }
}
</style>
